<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>OrderList</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <link href="../../static/backend/layui/css/layui.css" th:href="@{/backend/layui/css/layui.css}" rel="stylesheet"
          type="text/css"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <style>
        #list {

        }

        .detail {
            width: 80% !important;
            min-height: 300px !important;
            overflow: auto !important;
            border-radius: 10px !important;
            border: 3px solid #c2c2c2 !important;
        }
    </style>
    <!-- start menu -->
    <link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
    <script src="../../static/backend/layui/layui.js" th:src="@{/backend/layui/layui.js}"></script>
    <script>
        var layer;
        layui.use(["layer", "element"], function () {
            layer = layui.layer;
        });
    </script>
</head>
<body>
<!--header-->

<div th:replace="frontend/common::header"></div>
<!--//header-->

<div class="container">
    <div class="order">
        <h1>我的订单</h1>
        <div class="layui-row">
            <div class="layui-row" style="overflow: auto;">
                <div class="layui-col-md12" style="overflow: auto;">
                    <table class="layui-table" lay-skin="nob" style="min-width: 1140px;">
                        <thead>
                        <tr>
                            <th>订单ID</th>
                            <th>客户ID</th>
                            <th>收货人</th>
                            <th>电话</th>
                            <th>地址</th>
                            <th>总价</th>
                            <th>订单时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="list">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<script>

    $(function () {
        loadOrder();
    });

    // 加载我的订单列表
    function loadOrder() {
        $.get("/fleastreet/order/list", function (data) {
            if (data.code == 0) {
                var tbody = $("#list");
                if (data.data.size == 0) {
                    layer.msg("没有订单")
                } else {
                    appendToPage(data.data, tbody);
                }
            } else {
                layer.msg(data.msg);
            }
        })
    }


    // 将数据渲染进页面
    function appendToPage(items, tbody) {
        $(items).each(function (index, item) {
            var tr = $("<tr></tr>");
            tr.append($("<td width='60'>" + item.orderId + "</td>"));
            tr.append($("<td width='60'>" + item.userId + "</td>"));
            tr.append($("<td width='80'>" + item.consignee + "</td>"));
            tr.append($("<td width='80'>" + item.userPhone + "</td>"));
            tr.append($("<td width='160'>" + item.orderArea + "</td>"));
            tr.append($("<td width='60'>¥" + item.total + "</td>"));
            tr.append($("<td width='210'>" + item.createTime + "</td>"));
            var state = item.state;
            var status;//1:未付款 2:等待发货 3:等待收货 0:订单完成 -1:已取消
            switch (state) {
                case 1:
                    status = "<span class='layui-badge layui-bg-orange' style='width:60px;'>未付款</span>";
                    break;
                case 2:
                    status = "<span class='layui-badge layui-bg-green' style='width:60px;'>等待发货</span>";
                    break;
                case 3:
                    status = "<span class='layui-badge layui-bg-blue' style='width:60px;'>等待收货</span>";
                    break;
                case 0:
                    status = "<span class='layui-badge layui-bg-gray' style='width:60px;'>订单完成</span>";
                    break;
                case -1:
                    status = "<span class='layui-badge layui-bg-cyan' style='width:60px;'>已取消</span>";
                    break;
                default:
                    status = "<span class='layui-badge layui-bg-black' style='width:60px;'>未知状态</span>";
                    break;
            }

            tr.append($("<td id='state" + item.orderId + "'width='90'>" + status + "</td>"));

            var operter = $("<td ><button  onclick='getDetail(" + item.orderId + "," + item.state + ")' class='layui-btn layui-btn-radius layui-btn-primary' style='width: auto'>查看详情</button></td>");
            if (state == 3) {
                operter.append($("<button  id='recieve" + item.orderId + "'onclick='recieve(" + item.orderId + ")' class='layui-btn layui-btn-radius layui-btn-danger' style='width: 100px'>确认收货</button>"));
            }
            if (state == 1) {
                operter.append($("<button  id='pay" + item.orderId + "'style='width: 100px' onclick='pay(" + item.orderId + ")' class='layui-btn layui-btn-radius layui-btn-green' style='width: 100px'>付款</button>"));
            }
            tr.append(operter);
            tbody.append(tr);

        });
    }


    // 获取订单详情
    function getDetail(id) {
        $.get("/fleastreet/order/item/" + id, function (data) {
            if (data.code == 0) {
                var div = $("<div></div>");
                var table = $("<table class='layui-table' style='overflow: auto;min-width: 650px' lay-skin='line' ></table>");
                var tbody = $("<tbody></tbody>");
                $(data.data).each(function (index, item) {
                    var tr = $("<tr style='max-height: 200px;'></tr>");
                    tr.append($("<td ><img class='img_responsive' src='/fleastreet/manager/product/img/" + item.productId + "'/></td>"));
                    tr.append($("<td style='text-align: left;width: 200px;'><a style='color: #01AAED;text-decoration: underline;' href='/fleastreet/product/" + item.productId + "'>" + item.productId + "</a></td>"));
                    tr.append($("<td>单价：" + item.subTotal / item.productQuantity + "</td>"));
                    tr.append($("<td>数量：" + item.productQuantity + "</td>"));
                    tr.append($("<td>总价：￥" + item.subTotal + "</td>"));

                    //已完成订单才显示评价
                    if (item.state == 0){
                        if(item.orderReview == null){
                            tr.append($("<td><button id = 'docomment" + item.orderItemId + "'  onclick='ShowComment(" + item.productId + "," + id + "," + item.orderItemId + ")' class='layui-btn layui-btn-radius layui-btn-primary' style='width: auto' >待评价</button></td>"));
//                            $("#docomment"+item.orderItemId).css("display", "block");
                        }else{
                            tr.append($("<td><button id = 'comment" + item.orderItemId + "'   onclick='getComment(" + item.productId + "," + item.orderItemId + ")' class='layui-btn layui-btn-radius layui-btn-primary' style='width: auto' >已评价</button></td>"));

//                            $("#comment"+item.orderItemId).css("display","block");
                        }
                    }
                    tbody.append(tr);
                });
                table.append(tbody);
                div.append(table);
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'detail',
                    content: div.html()
                });
            } else {
                layer.msg(data.msg);
            }
        });
    }

    //评价
    function ShowComment(productId, orderId, orderItemId) {
        var div = $("<div></div>");
        div.append($("<div><textarea id = 'comment' class='m-wrap large' rows='4' style='height:200px; width:360px; max-height: 200px;' placeholder='请在这里输入评价内容'></textarea></div>"));
        div.append($("<div style='height: 40px;'><button id='commentsubmit' type='submit' class='btn green pull-right'>提交</button></div>"));
        var index = layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            skin: 'layui-layer-lan',
            content: div.html()
        });
        $("#commentsubmit").click(function(){
            doComment(index,orderId, orderItemId);
        });
    }

    //获取评论信息并入库
    function doComment(index, orderId, orderItemId) {
        var content =document.getElementById("comment").value;
        if(content == null || content ==""){
            layer.msg("请先输入评价内容");
        }else{
            $.ajax({
                url: "/fleastreet/order/docomment/" + orderItemId + "/" + content,
                type: "post",
                async: false,
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg("评论已提交！");
//                        layer.close(index);//关闭当前弹出层
                        layer.closeAll();
                        getDetail(orderId);
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg("连接错误！");
                }
            });
        }
    }

    //获取评价信息
    function getComment(productId, orderItemId){

    }

    //付款
    function pay(id) {

        $.ajax({
            url: "/fleastreet/order/pay/" + id,
            type: "post",
            success: function (result) {
                if (result.code == 0) {
                    layer.msg("付款成功！");
                    $("#state"+id).html("<span class='layui-badge layui-bg-green' style='width:60px;'>等待发货</span>");
                    $("#pay"+id).hide()
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function () {
                layer.msg("连接错误！");
            }
        });
    }

    //确认收货
    function recieve(id) {
        layer.confirm('您确认已经收到货了吗？', {btn: ['嗯，我拿到了', '什么？我根本没见过货']}, function (index) {
                    layer.close(index)
                    $.ajax({
                        url: "/fleastreet/order/receive/" + id,
                        type: "post",
                        success: function (result) {
                            if (result.code == 0) {
                                $("#state"+id).html("<span class='layui-badge layui-bg-gray' style='width:60px;'>订单完成</span>");
                                $("#recieve"+id).hide()
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                        error: function () {
                            layer.msg("连接错误！");
                        }
                    })
                }
        );
    }


</script>
<!--footer-->

<div th:replace="frontend/common::footer"></div>

<!--//footer-->
</body>
</html>